<!-- Scroll -->
<template>
  <!--wrapper里面套content-->
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: 'Scroll',
    props: {
      probeType: {
        type: Number,
        default: 0
      },
      pullUpLoad: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        scroll: null
      }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      /**
       * 创建bs对象
       */
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        /**点击属性 */
        probeType: this.probeType,
        /**滚动属性 */
        pullUpLoad: this.pullUpLoad /**加载属性 */
      });

      this.scroll.on("scroll", (position) => {
        console.log("_____")
        // console.log(position)
        this.$emit("scroll", position)
      })

      this.scroll.on("pullingUp", () => {
        this.$emit("pullingUp");
      })

    },
    methods: {
      /**
       * 监听滚动的位置
       */
      scrollTo(x, y, time = 300) {
        this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time)
      },
      /**
       * 上拉加载更多
       */
      finishPullUp() {
        this.scroll && this.scroll.finishPullUp()
      },
      refresh() {
        this.scroll && this.scroll.refresh && this.scroll.refresh()
      }
    }
  }

</script>
<style scoped>
  /* @import url(); 引入css类 */

</style>
